<template>
  <div>
    <el-row type="flex" justify="center">
      <el-col :span="19">
        <div id="box">
          <el-row :gutter="5">
            <el-col :span="4">
              <el-input size="small" placeholder="请输入筛选的课程" v-model="courseName"></el-input>
            </el-col>
            <el-col :span="2">
              <el-button type="primary" size="small" icon="el-icon-search">搜索</el-button>
            </el-col>
            <el-col :span="2">
              <el-button type="primary" size="small" icon="el-icon-plus" @click="openaddcourse = true">添加课程</el-button>
            </el-col>
            <el-dialog :visible.sync="openaddcourse" width="50%">
              <el-form :rules="rules" ref="addcourse" :model="params" label-width="110px" label-position="left" resetFields>
                <el-form-item label="课程名称:" prop="course_name">
                  <el-input placeholder="请输入课程名称" v-model="params.courseName"></el-input>
                </el-form-item>
                <el-form-item label="课程简称:" prop="courseAbbreviation">
                  <el-input placeholder="请输入课程简称" v-model="params.courseAbbreviation"></el-input>
                </el-form-item>
                <el-form-item label="课程封面:">
                  <template>
                    <el-upload
                      action="https://jsonplaceholder.typicode.com/posts/"
                      list-type="picture-card">
                      <i class="el-icon-plus"></i>
                    </el-upload>
                  </template>
                </el-form-item>
                <el-form-item label="核心培养目标:" prop="courseTrainObjective">
                  <el-input placeholder="请输入核心培养目标" v-model="params.courseTrainObjective"></el-input>
                </el-form-item>
                <el-form-item label="教学目标:" prop="courseTeachGoal">
                  <el-input placeholder="请输入教学目标" v-model="params.courseTeachGoal"></el-input>
                </el-form-item>
                <el-form-item label="教学方法:" prop="courseTeachMethod">
                  <el-input placeholder="请输入教学方法" v-model="params.courseTeachMethod"></el-input>
                </el-form-item>
                <el-form-item label="课程系列:">
                  <el-input placeholder="请输入课程系列" v-model="params.courseTypeName"></el-input>
                </el-form-item>
                <el-form-item label="课程语言:">
                  <el-input placeholder="请输入课程语言" v-model="params.courseLanguageName"></el-input>
                </el-form-item>
                <el-form-item label="前导课程:">
                  <el-input placeholder="请输入前导课程" v-model="params.beforeCourseName"></el-input>
                </el-form-item>
                <el-form-item label="后续课程:">
                  <el-input placeholder="请输入后续课程" v-model="params.afterCourseName"></el-input>
                </el-form-item>
              </el-form>
              <center>
              <span slot="footer" class="dialog-footer">
                <el-button @click="openaddcourse = false">取 消</el-button>
                <el-button type="primary" @click="addCourses('addcourse')">确 定</el-button>
              </span>
              </center>
            </el-dialog>
            <el-dialog :visible.sync="openupdatecourse" width="50%">
              <el-form :rules="ruless" ref="updatecourse" :model="params" label-width="110px" label-position="left" resetFields>
                <el-form-item label="课程名称:" prop="course_name">
                  <el-input placeholder="请输入课程名称" v-model="params.course_name"></el-input>
                </el-form-item>
                <el-form-item label="课程简称:" prop="course_abbreviation">
                  <el-input placeholder="请输入课程简称" v-model="params.course_abbreviation"></el-input>
                </el-form-item>
                <el-form-item label="课程封面:">
                  <template>
                    <el-upload
                      action="https://jsonplaceholder.typicode.com/posts/"
                      list-type="picture-card">
                      <i class="el-icon-plus"></i>
                    </el-upload>
                  </template>
                </el-form-item>
                <el-form-item label="核心培养目标:" prop="course_train_objective">
                  <el-input placeholder="请输入核心培养目标" v-model="params.course_train_objective"></el-input>
                </el-form-item>
                <el-form-item label="教学目标:" prop="course_teach_goal">
                  <el-input placeholder="请输入教学目标" v-model="params.course_teach_goal"></el-input>
                </el-form-item>
                <el-form-item label="教学方法:" prop="couse_teach_method">
                  <el-input placeholder="请输入教学方法" v-model="params.couse_teach_method"></el-input>
                </el-form-item>
                <el-form-item label="课程系列:">
                  <el-input placeholder="请输入课程系列" v-model="params.courseTypeName"></el-input>
                </el-form-item>
                <el-form-item label="课程语言:">
                  <el-input placeholder="请输入课程语言" v-model="params.courseLanguageName"></el-input>
                </el-form-item>
                <el-form-item label="前导课程:">
                  <el-input placeholder="请输入前导课程" v-model="params.beforeCourseName"></el-input>
                </el-form-item>
                <el-form-item label="后续课程:">
                  <el-input placeholder="请输入后续课程" v-model="params.afterCourseName"></el-input>
                </el-form-item>
              </el-form>
              <center>
              <span slot="footer" class="dialog-footer">
                <el-button @click="openupdatecourse = false">取 消</el-button>
                <el-button type="primary" @click="updateCourses('updatecourse')">确 定</el-button>
              </span>
              </center>
            </el-dialog>
            <el-col :span="5">
              <el-button size="small" type="primary" icon="el-icon-plus" @click="search">导入课程</el-button>
              <el-button size="small" type="primary" icon="el-icon-plus" @click="search">导入模板下载</el-button>
            </el-col>
          </el-row>
          <el-row style="margin-top: 1.8rem;">
            <el-col :span="1">
              <div class="Header-i"><i class="fa fa-tag" aria-hidden="true"></i></div>
            </el-col>
            <el-col :span="2"><div style="border: 1px solid #edeef0; margin-top: 1rem;"></div></el-col>
            <el-col :span="2"><div class="Header-text"><span>数据列表</span></div></el-col>
            <el-col :span="19"><div style="border: 1px solid #edeef0; margin-top: 1rem;"></div></el-col>
          </el-row>
          <el-row>
            <el-table empty-text="暂无数据" :header-cell-style="{background: '#f8f8f9'}" :data="tableData" border style="width: 100%; font-size: 1rem;">
              <el-table-column fixed="left" prop="course.course_name" label="课程名称" width="150"></el-table-column>
              <el-table-column prop="course.course_train_objective" label="核心培养" width="120"></el-table-column>
              <el-table-column prop="course.course_teach_goal" label="教学目标" width="120"></el-table-column>
              <el-table-column prop="course.couse_teach_method" label="教学方法" width="120"></el-table-column>
              <el-table-column prop="course.course_type" label="课程体系" width="120">
                <template scope.></template>
              </el-table-column>
              <el-table-column prop="course.course_before" label="前导课程" width="120"></el-table-column>
              <el-table-column prop="course.course_after" label="后续课程" width="120"></el-table-column>
              <el-table-column label="参考资料" width="120">
                <template>
                  <el-button type="primary" icon="el-icon-plus" size="mini">上传资料</el-button>
                </template>
              </el-table-column>
              <el-table-column label="封面" align="center" width="120"></el-table-column>
              <el-table-column fixed="right" label="知识管理" align="center" width="100">
                <template slot-scope="scope">
                  <el-tag effect="plain" size="mini">0.0%</el-tag>
                  </template>
              </el-table-column>
              <el-table-column fixed="right" label="操作" width="200" align="center">
                <template slot-scope="scope">
                  <el-button type="primary" size="mini" @click="findcoursebyId(scope.row.course.course_id)">编辑</el-button>
                  <el-button type="danger" size="mini" @click="deletecourse(scope.row.course.course_id)">删除</el-button>
                  <el-dialog class="dialog" :visible.sync="ExaminationRules" :append-to-body="true" width="80%" title="111">
                    <el-row>
                      <div class="divider">
                        <el-divider width="100%"></el-divider>
                      </div>
                    </el-row>
                    <el-row>
                    </el-row>
                    <el-row style="margin-top: 1.8rem; margin-bottom: 1rem;">
                      <el-col :span="1">
                        <div><i class="fa fa-tag" aria-hidden="true"></i></div>
                      </el-col>
                      <el-col :span="2"><div style="border: 1px solid #edeef0; margin-top: 1rem;"></div></el-col>
                      <el-col :span="2"><div style="text-align: center;"><span>数据列表</span></div></el-col>
                      <el-col :span="19"><div style="border: 1px solid #edeef0; margin-top: 1rem;"></div></el-col>
                    </el-row>
                    <el-row>
                    </el-row>
                    <el-row type="flex" justify="center">
                      <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="currentPage4"
                        :page-sizes="[100, 200, 300, 400]"
                        :page-size="100"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="400">
                      </el-pagination>
                    </el-row>
                  </el-dialog>
                  </template>
              </el-table-column>
            </el-table>
          </el-row>
          <el-row type="flex" justify="center">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage4"
              :page-sizes="[10, 50, 100, 200]"
              :page-size="page_size"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total">
            </el-pagination>
          </el-row>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import http from '@/utils/HttpUtil'
import moment from 'moment'
export default {
  data () {
    return {
      tableData: [],
      dialogFormVisible: false,
      openupdatecourse: false,
      details: false,
      action: {
        getlistCourses: 'LearningPlatform/manager/course/listCourses',
        deletecourse: 'LearningPlatform/manager/course/deleteCourse',
        addCourses: 'LearningPlatform/manager/course/addCourse',
        findCoursesbyId: 'LearningPlatform/manager/course/getCourseById',
        updateCourseById: 'LearningPlatform/manager/course/updateCourse'
      },
      // loginaccount: sessionStorage.getItem('loginaccount'),
      // loginusername: sessionStorage.getItem('loginusername'),
      // loginuserId: sessionStorage.getItem('loginuserId'),
      params: {
        account: sessionStorage.getItem('loginaccount'),
        userName: sessionStorage.getItem('loginusername'),
        userId: sessionStorage.getItem('loginuserId'),
        courseName: '',
        courseAbbreviation: '',
        courseTrainObjective: '',
        courseTeachGoal: '',
        courseTeachMethod: '',
        courseTypeName: '',
        courseLanguageName: '',
        beforeCourseName: '',
        afterCourseName: ''
      },
      rules: {
        course_name: [
          {
            required: true, message: '信息不能为空', trigger: 'blur'
          }],
        course_abbreviation: [
          {
            required: true, message: '信息不能为空', trigger: 'blur'
          }],
        courseTrainObjective: [
          {
            required: true, message: '信息不能为空', trigger: 'blur'
          }],
        courseTeachGoal: [
          {
            required: true, message: '信息不能为空', trigger: 'blur'
          }],
        courseTeachMethod: [
          {
            required: true, message: '信息不能为空', trigger: 'blur'
          }]
      },
      ruless: {
        course_name: [
          {
            required: true, message: '信息不能为空', trigger: 'blur'
          }],
        course_abbreviation: [
          {
            required: true, message: '信息不能为空', trigger: 'blur'
          }],
        course_train_objective: [
          {
            required: true, message: '信息不能为空', trigger: 'blur'
          }],
        course_teach_goal: [
          {
            required: true, message: '信息不能为空', trigger: 'blur'
          }],
        couse_teach_method: [
          {
            required: true, message: '信息不能为空', trigger: 'blur'
          }]
      },
      addExam: {
        examType: '1',
        clazz: ''
      },
      openaddcourse: false,
      classList: [],
      classtimes: '',
      examname: '',
      Submission: '可以立即提交',
      Publish: '试卷提交之后',
      overtime: '可以',
      show: true,
      currentPage4: 1,
      page_size: 10,
      total: 0,
      ExaminationRules: false,
      addExamination: false,
      courseName: '',
      courseId: 0
    }
  },
  components: {

  },
  filters: {
    // 使用moment.js转化时间
    formatDate (value) {
      return moment(value).format('YYYY-MM-DD- h:mm:ss')
    }
  },
  methods: {
    findcoursebyId (id) {
      this.openupdatecourse = true
      this.courseId = id
      let params = {
        courseId: id
      }
      http.xhrGet(this, this.action.findCoursesbyId, params, (res) => {
        this.params = res.data.data
      })
    },
    updateCourses (refName) {
      this.$refs[refName].validate((valid) => {
        if (valid) {
          let params = {
            courseId: this.courseId,
            courseName: this.params.course_name,
            courseAbbreviation: this.params.course_abbreviation,
            courseTrainObjective: this.params.course_train_objective,
            courseTeachGoal: this.params.course_teach_goal,
            courseTeachMethod: this.params.couse_teach_method,
            courseTypeName: this.params.courseTypeName,
            courseLanguageName: this.params.courseLanguageName,
            beforeCourseName: this.params.beforeCourseName,
            afterCourseName: this.params.afterCourseName
          }
          http.xhrPost(this, this.action.updateCourseById, params, (res) => {
            this.$message({
              type: 'success',
              message: '修改成功'
            })
            this.params = {}
            this.openupdatecourse = false
            this.getlistCourses(this.courseName, this.page_size, this.currentPage4)
          })
        }
      })
    },
    addCourses (refName) {
      this.$refs[refName].validate((valid) => {
        let params = this.params
        http.xhrPost(this, this.action.addCourses, params, (res) => {
          this.$message({
            type: 'success',
            message: '新增成功'
          })
          this.openaddcourse = false
          this.getlistCourses(this.courseName, this.page_size, this.currentPage4)
          this.params = {
            courseName: '',
            courseAbbreviation: '',
            courseTrainObjective: '',
            courseTeachGoal: '',
            courseTeachMethod: '',
            courseTypeName: '',
            courseLanguageName: '',
            beforeCourseName: '',
            afterCourseName: ''
          }
        })
      })
    },
    display () {
      this.show = true
    },
    hide () {
      this.show = false
    },
    deletecourse (courseId) {
      let params = {
        'courseId': courseId
      }
      this.$confirm('是否删除该条记录', '确认删除', {
        confirmButtonText: '残忍丢弃',
        cancelButtonText: '容我想想',
        type: 'warning'
      }).then(() => {
        http.xhrPost(this, this.action.deletecourse, params, (res) => {
          this.$message({
            type: 'success',
            message: '删除成功！'
          })
          this.getlistCourses(this.courseName, this.page_size, this.currentPage4)
        })
      })
    },
    // getlistCourses () {
    //   http.xhrGet(this, this.active.getlistCourses, null, (res) => {
    //     this.classList = res.data.data.list
    //     console.log(res.data.data)
    //   })
    // },
    handleSizeChange (pageSize) {
      this.getlistCourses(this.courseName, pageSize, this.currentPage4)
    },
    handleCurrentChange (currPage) {
      this.getlistCourses(this.courseName, currPage, this.page_size)
    },
    getlistCourses (className = null, page_size = 1, currentPage4 = 10) {
      // 封装需要发送给服务器的参数
      let params = {
        'rows': currentPage4,
        'page': page_size
      }
      // 发送分页查询请求实现分页查询
      http.xhrGet(this, this.action.getlistCourses, params, (res) => {
        // 判断数据， 点前页码， 一页的总条数变化，总条数
        this.tableData = res.data.data.list
        this.currentPage4 = res.data.data.pageSize
        this.page_size = res.data.data.pageNum
        this.total = res.data.data.total
      })
    },
    search () {
      let courseName = this.courseName
      this.getlistCourses(courseName, 1, 10)
    }
  },
  mounted () {
    this.getlistCourses()
  }
}
</script>

<style scoped="scoped">
  @import url("../assets/css/exam.css");
</style>
